
<template>
  <div class="image-view">
    <div>
          <draggable class="demo-image-preview" :list="imageList" :animation="1000">
              <template #item="{element,index}">
                <div class="item" v-if="getType(element)">
                    <div  class="image-list">
                      <imageView :url="element" />
                    </div>
                    <div class="vxe-icon-close" @click="delItem(index)" title="删除"></div>
                  </div>
                  <div class="item" v-else>
                    <video width="120" height="120" controls="controls">
                      <source :src="element"  type="video/mp4" />
                      <source :src="element"  type="video/ogg" />
                      <source :src="element"  type="video/webm" />
                  </video>
                  <div class="vxe-icon-close" @click="delItem(index)" title="删除"></div>
                  </div>
              </template>
            </draggable>
    </div>
    <el-upload v-if="props.count>imageList.length"
      :action="`${path}/api/files/upload`"
      :show-file-list="false"
      :on-success="handleImageSuccess"
      :before-upload="beforeImageUpload"
      :limit="props.count"
      :multiple="multiple" >
      <div class="btn-upload">   
          <div class="add"><vxe-icon name="add" style="font-size:18px;"></vxe-icon> </div>
          <div class="add">{{textTips}}</div>
      </div>
    </el-upload>
  </div>
</template>
<script setup>
import ImageCompress from '@/utils/image'
import { ref,watch,reactive } from 'vue'
import { VXETable } from 'vxe-table'
import imageView from '@/components/custom/image.vue'
import draggable from "vuedraggable"
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: '',
  imageUrl: {
    type: String,
    default: ''
  },
  count:{
    type: Number,
    default: 10
  },
  textTips:{
    type: String,
    default: '上传图片'
  },
  fileSize: {
    type: Number,
    default: 2048 // 2M 超出后执行压缩
  },
  maxWH: {
    type: Number,
    default: 1920 // 图片长宽上限
  },
  multiple:{
    type: Boolean,
    default: true
  }
})

const path = ref(import.meta.env.VITE_BASE_API)
const imageList = ref([])
watch(() => props.modelValue, (n, o) => {
  imageList.value = n
})

const beforeImageUpload = (file) => {
  const isJPG = file.type === 'image/jpeg'
  const isPng = file.type === 'image/png'
  const isVideo = file.type === 'video/ogg'
  if (!isJPG && !isPng && !isVideo) {
    VXETable.modal.message({ content: '上传图片只能是 jpg或png 格式!', status: 'error'})
    return false
  }

  const isRightSize = file.size / 1024 < props.fileSize
  if (!isRightSize) {
    // 压缩
    const compress = new ImageCompress(file, props.fileSize, props.maxWH)
    return compress.compress()
  }
  return isRightSize
}

const handleImageSuccess = (res) => {
  if (res.success) {
    imageList.value.push(res.url)
    emit('update:modelValue',imageList.value)
  }
}
const delItem = (index) => {
  imageList.value.splice(index,1)
  emit('update:modelValue',imageList.value)

}
const getType=(name)=>{
  if(name.indexOf('.png')>0||name.indexOf('.PNG')>0||name.indexOf('.jpg')>0||name.indexOf('.JPG')>0){
    return true
  }else{
    return false
  }
}
</script>


<style lang="scss" scoped>
.btn-upload{
   border: 1px dashed #d9d9d9;
    width: 120px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    height: 120px;
    align-items: center;
    background-color: #f7f7f7;
    line-height: 90px;
    .add{
      width: 100%;
      font-size: 12px;
      color: #888;
      height:30px;
    }
}
.image-view{
  display: flex;
  justify-content: flex-start;
}
.demo-image-preview{
  margin-left:10px;
  display: flex;
  .item{
    margin-right:10px;
    margin-bottom:10px;
    position: relative;
      .image-list{
        width: 120px; 
        height: 120px;
        cursor: pointer;
      }
      .vxe-icon-close{
        color: #fff;
        cursor: pointer;
          z-index:99;
          position: absolute;
          right:6px;
          top:6px;
          height:20px;
          line-height:20px;
          width:20px;
          border-radius:20px;
          background-color: #888;
          text-align: center;
          font-size:12px;
      }
  }

}
</style>
